<template>
    <div class="order-check">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input v-model="form.orderId" placeholder="请输入订单号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="checkOrder" :loading="loading">查询</el-button>
        </el-form-item>
      </el-form>
      
      <el-result v-if="result !== null" :icon="resultIcon">
        <template slot="title">
          {{ resultTitle }}
        </template>
        <template slot="subTitle">
          {{ resultSubtitle }}
        </template>
      </el-result>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          orderId: ''
        },
        result: null,
        loading: false
      }
    },
    computed: {
      resultIcon() {
        return this.result ? 'success' : 'error'
      },
      resultTitle() {
        return this.result ? '订单已存在' : '订单不存在'
      },
      resultSubtitle() {
        return this.result ? '该订单已经提交过评价' : '该订单可以提交评价'
      }
    },
    methods: {
      checkOrder() {
        if (!this.form.orderId) {
          this.$message.warning('请输入订单号')
          return
        }
        
        this.loading = true
        this.$store.dispatch('checkOrderExists', this.form.orderId)
          .then(response => {
            this.result = response.exists
          })
          .catch(error => {
            this.$message.error(error.response?.data?.message || '查询失败')
          })
          .finally(() => {
            this.loading = false
          })
      }
    }
  }
  </script>
  
  <style scoped>
  .order-check {
    padding: 20px;
  }
  </style>